<template>
	<view class="page">
		<view class="order_status-wrap" v-if="pickupStatus!==4">
			<image class="icon" src="static/success-icon.png" mode=""></image>
			<text v-if="pickupStatus<2">等待平台接送</text>
			<text v-if="pickupStatus===2">服务中</text>
			<text v-if="pickupStatus===3">已完成</text>
			<text v-if="pickupStatus===5">已取消</text>
		</view>
		<view class="order_status-wrap order_success" v-else>
			<view class="l-wrap">
				<image class="icon" src="static/fail-icon.png" mode=""></image>
				<text>已取消</text>
			</view>
		</view>
		
		<view class="pickuper_info-wrap">
			<view class="top-dack"></view>
			<view class="pickuper_info tp-w690">
				<view class="common_tit-wrap">
					<view class="l-wrap">接送人信息</view>
					<view class="r-wrap"></view>
				</view>
				<view class="name tp-mt10"> <text style="font-weight: bold;margin-right:40rpx;">{{detail.passengerName || ''}}</text> {{detail.phone || ''}}</view>
				<view class="adress tp-mt10"> <text style="color:#FFAF3C;margin-right: 20rpx;">{{detail.pickState || ''}}：</text>{{detail.station || ''}}</view>
				<view class="adress tp-fc333 tp-lh54" v-if="detail.transferTime"> <text style=";margin-right: 20rpx;">候车时间：</text>{{detail.transferTime || ''}}</view>
			</view>
		</view>
		
		<!-- 司机信息展示 S -->
		<CommonDriverInfo v-if="[1,2,3,5].includes(pickupStatus)" :info="detail.driverSimpleVo"></CommonDriverInfo>
		<!-- 司机信息展示 E -->
		
		
		<!-- 客服电话 S -->
		<view class="input-wrap tp-w690" @click="handleTakePhone">
			<view class="type">客服电话</view>
			<image class="phone-icon" src="../static/imgs/icons/phone1-icon.png" mode=""></image>
		</view>
		<!-- 客服电话 E -->
		
		<!-- 二维码展示 S -->
		<CommonCode
			:code="detail.pinzheng"
			:codeDisable="[2,3,4].includes(pickupStatus)"
			:used="[2,3].includes(pickupStatus)"
			:expired="[4,5].includes(pickupStatus)"
			:url="/^[http | https]/.test(detail.qrCode) ? detail.qrCode : (wwwImgUrl + detail.qrCode)"
		></CommonCode>
		<!-- 二维码展示 E -->
		
		<view class="order_info-wrap tp-w690">
			<view class="order_num">订单号：{{detail.orderNo || ''}} </view>
			<view class="order_date">下单时间：{{detail.createTime || ''}}</view>
			<view class="order_paytype" v-if="pickupStatus===4">取消时间：{{detail.cancelTime || ''}} </view>
		</view>
		
		<view class="btm_btn-wrap" v-if="![2,4,5].includes(pickupStatus)">
			<view v-if="pickupStatus===3 && detail.status==5" class="btn pay" @click="handleScore">打分评价</view>
			<view v-if="pickupStatus===3 && detail.status==6" class="btn pay" @click="handleGoTravelEvaluation">查看评价</view>
			<view v-if="pickupStatus===0 || pickupStatus===1" class="btn pay" @click="handleCancleOrder">取消订单</view>
		</view>
		
		<!-- 客服服务电话痰喘 S-->
		<CommonServicePhone ref="takePhone" :list="servicePhoneList"></CommonServicePhone>
		<!-- 客服服务电话痰喘 E-->
		
		<CommonScoreEvaluation ref="score" @confirm="handleSubmitScore"></CommonScoreEvaluation>
		
		<CommonAlert ref="alert" :config="alertConfig" @confirm="handleConfirmCancleOrder"></CommonAlert>
		
	</view>
</template>

<script>
	import CommonScoreEvaluation from '@/components/common/common-scoreEvaluation.vue'
	import CommonAlert from '@/components/common/common-alert.vue'
	import CommonCode from '@/components/common/common-code.vue'
	import CommonDriverInfo from '@/components/common/common-driverInfo.vue'
	import CommonServicePhone from '@/components/common/common-servicePhone.vue'
	export default {
		components: {
			CommonScoreEvaluation,
			CommonAlert,
			CommonCode,
			CommonDriverInfo,
			CommonServicePhone
		},
		data() {
			return {
				id: '', // 车票id
				pickupStatus: 2, // 0等待平台接送（未分配司机）|1等待平台接送（已分配司机）|2服务中|3已完成|4已取消（未分配司机）|5已取消（已分配司机）
				alertConfig: {
					cancleText: '取消',
					confirmText: '确定',
					content: '是否取消订单？'
				},
				detail: {},
				servicePhoneList: []
			};
		},
		onLoad(opt) {
			this.id = opt && opt.id
			this.getDetail()
			this.getServicePhone()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getDetail()
		},
		methods: {
			handleGoTravelEvaluation() { // 点击跳转到评价详情
				uni.navigateTo({
					url: './busTravelEvaluation?id=' + this.detail.orderNo
				});
			},
			handleConfirmCancleOrder() { // 取消订单
				this.$http.get(this.$api.canclePickupServiceOrder, {id: this.detail.id}).then(res => {
					if (res.code === 200) {
						this.getDetail()
					}
				})
			},
			handleScore() {
				this.$refs.score.show()
			},
			handleSubmitScore(val) { // 提交评分
				console.log(val);
				const { rate, reason } = val
				this.$http.post(this.$api.evaluate, {
					type: 1,
					orderNo: this.detail.orderNo,
					grade: rate * 20,
					context: reason
				}).then(res => {
					if (res.code === 200) {
						this.getDetail()
					}
				})
			},
			handleTakePhone() {
				this.$refs.takePhone.show()
			},
			handleCancleOrder() {
				this.$refs.alert.show()
			},
			getDetail() {
				this.$http.get(this.$api.getpickuperDetail + this.id).then(res => {
					uni.stopPullDownRefresh();
					if (res.code === 200) {
						this.detail = res.data
						let sts = res.data.status
						let a = 1
						if (sts == 1) {
							a = 0 // 待接送（未分配司机）
						} else if (sts == 2) { 
							a = 1  // 待接送（已分配司机）
						} else if (sts == 3) { 
							a = 2 // 服务中
						} else if (sts == 4) { 
							a = 2 // 服务中
						} else if (sts == 7 && !res.data.driverSimpleVo) { 
							a = 4 // 已取消（未分配司机）
						} else if (sts == 7 && res.data.driverSimpleVo) {
							a = 5 // 已取消（已分配司机）
						} else if (sts == 6 || sts == 5) {
							a = 3 // 已完成
						}
						this.pickupStatus = a
					}
				})
			},
			getServicePhone() {
				this.$http.get(this.$api.getServicePhone, {type:2}).then(res => {
					if (res.code === 200) {
						this.servicePhoneList = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
	padding: 120rpx 0;
}
.order_status-wrap {
	padding: 0 30rpx;
	display: flex;
	align-items: center;
	color: #fff;
	height: 120rpx;
	font-size: 30rpx;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9;
	background-color: $blue;
	.icon {
		height: 36rpx;
		width: 36rpx;
		margin-right: 20rpx;
	}
	&.order_success {
		display: flex;
		justify-content: space-between;
		.l-wrap {
			display: flex;
		}
		.share-icon {
			height: 36rpx;
			width: 36rpx;
		}
	}
}

.pickuper_info-wrap {
	position: relative;
	.top-dack {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 130rpx;
		background-color:$blue;
		z-index: -1;
	}
	.pickuper_info {
		background-color: #fff;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		padding: 0 30rpx 20rpx;
		box-sizing: border-box;
		// height: 200rpx;
		font-size: 28rpx;
		.common_tit-wrap {
			margin-top: 30rpx;
			.l-wrap {
				font-size: 28rpx;
				font-weight: 500;
			}
		}
		.info-wrap {
			.name {
				
			}
			.address {
				
			}
		}
	}
}

.driver_info-wrap {
	margin-top: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 12rpx;
	height: 140rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	background-color: #fff;
	.info-wrap {
		display: flex;
		.avatar {
			height: 80rpx;
			width: 80rpx;
			border-radius: 50%;
			overflow: hidden;
			background-color: pink;
			margin-right: 20rpx;
		}
		.info {
			font-size: 26rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.driver {
				display: flex;
				align-items: center;
				.name {
					margin-right: 32rpx;
				}
			}
			.car {
				.num {
					margin-right: 40rpx;
				}
			}
		}
	}
	.address-icon {
		height: 64rpx;
		width: 64rpx;
	}
}

.input-wrap {
	margin-top: 20rpx;
	height: 88rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx;
	box-sizing: border-box;
	border-radius: 12rpx;
	font-size: 30rpx;
	font-weight: 500;
	background-color: #fff;
	.phone-icon {
		height: 44rpx;
		width: 44rpx;
	}
}

.order_info-wrap {
	margin-top: 20rpx;
	line-height: 50rpx;
	width:690rpx;
	background:#fff;
	border-radius:12rpx;
	padding: 30rpx;
	box-sizing: border-box;
}


.btm_btn-wrap {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 98rpx;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-size: 30rpx;
	z-index: 3;
	background-color: #fff;
	padding: 0 30rpx;
	box-shadow: 0 2px 5px 1px #ebebeb;
	.btn {
		padding: 0 30rpx;
		min-width: 60rpx;
		border-radius: 8rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		&.cancle {
			border: 1px solid #ccc;
			color: #ccc;
		}
		&.pay {
			color: #fff;
			background-color: $blue;
			margin-left: 20rpx;
		}
	}
}

.takephone-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 420rpx;
	border-radius: 12rpx;
	background-color: #fff;
	padding: 58rpx 0 ;
	position: relative;
	.tit {
		font-size: 32rpx;
		font-weight: bold;
	}
	.close-icon {
		position: absolute;
		top: -30rpx;
		right: -30rpx;
		z-index: 2;
	}
	.phone_list {
		.phone_item {
			font-size: 30rpx;
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			.phone-icon {
				height: 64rpx;
				width: 64rpx;
				margin-right: 20rpx;
			}
		}
	}
}

</style>
